// cover some element-ui styles
.el-breadcrumb__inner,
.el-breadcrumb__inner a {
    font-weight: 400 !important;
}

.el-upload {
    input[type="file"] {
        display: none !important;
    }
}

.el-upload__input {
    display: none;
}

.cell {
    .el-tag {
        margin-right: 0px;
    }
}

.small-padding {
    .cell {
        padding-left: 5px;
        padding-right: 5px;
    }
}

.fixed-width {
    .el-button--mini {
        padding: 7px 10px;
        width: 60px;
    }
}

.status-col {
    .cell {
        padding: 0 10px;
        text-align: center;
        .el-tag {
            margin-right: 0px;
        }
    }
}

// to fixed https://github.com/ElemeFE/element/issues/2461
.el-dialog {
    transform: none;
    left: 0;
    position: relative;
    margin: 0 auto;
}

// refine element ui upload
.upload-container {
    .el-upload {
        width: 100%;
        .el-upload-dragger {
            width: 100%;
            height: 200px;
        }
    }
}

// dropdown
.el-dropdown-menu {
    a {
        display: block
    }
}

// fix date-picker ui bug in filter-item
.el-range-editor.el-input__inner {
    display: inline-flex !important;
}

// to fix el-date-picker css style
.el-range-separator {
    box-sizing: content-box;
}

.el-menu--collapse>div>.el-submenu>.el-submenu__title .el-submenu__icon-arrow {
    display: none;
}

.el-dropdown .el-dropdown-link {
    color: var(--el-color-primary) !important;
}

// Global Select Dropdown Glass Styles
.el-select {
    .el-input {
        .el-input__wrapper {
            background: rgba(255, 255, 255, 0.1) !important;
            border: 1px solid rgba(255, 255, 255, 0.2) !important;
            border-radius: 8px !important;
            backdrop-filter: blur(10px) !important;
            box-shadow: none !important;
            
            &:hover {
                border-color: rgba(255, 255, 255, 0.3) !important;
            }
            
            &.is-focus {
                border-color: var(--accent-blue) !important;
                box-shadow: 0 0 0 2px rgba(66, 165, 245, 0.2) !important;
            }
            
            .el-input__inner {
                background: transparent !important;
                color: var(--text-primary) !important;
                
                &::placeholder {
                    color: var(--text-muted) !important;
                }
            }
            
            .el-input__suffix {
                .el-input__suffix-inner {
                    color: var(--text-secondary) !important;
                }
            }
        }
    }
}

// Select Dropdown Panel Styles
.el-select-dropdown {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37) !important;
    
    .el-select-dropdown__item {
        background: transparent !important;
        color: var(--text-primary) !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        
        &:hover {
            background: rgba(255, 255, 255, 0.2) !important;
            color: var(--accent-blue) !important;
        }
        
        &.selected {
            background: linear-gradient(135deg, var(--accent-blue), var(--accent-orange)) !important;
            color: white !important;
            font-weight: 500 !important;
        }
    }
    
    .el-select-dropdown__empty {
        color: var(--text-muted) !important;
    }
}

// Tree Select Styles
.el-tree-select {
    .el-input {
        .el-input__wrapper {
            background: rgba(255, 255, 255, 0.1) !important;
            border: 1px solid rgba(255, 255, 255, 0.2) !important;
            border-radius: 8px !important;
            backdrop-filter: blur(10px) !important;
            box-shadow: none !important;
            
            &:hover {
                border-color: rgba(255, 255, 255, 0.3) !important;
            }
            
            &.is-focus {
                border-color: var(--accent-blue) !important;
                box-shadow: 0 0 0 2px rgba(66, 165, 245, 0.2) !important;
            }
        }
    }
}

.el-tree-select-popper {
    .el-select-dropdown {
        background: rgba(255, 255, 255, 0.9) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        border-radius: 12px !important;
        box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37) !important;
        
        .el-tree {
            background: transparent !important;
            
            .el-tree-node {
                .el-tree-node__content {
                    background: transparent !important;
                    color: var(--text-primary) !important;
                    
                    &:hover {
                        background: rgba(255, 255, 255, 0.2) !important;
                    }
                }
                
                &.is-current > .el-tree-node__content {
                    background: linear-gradient(135deg, var(--accent-blue), var(--accent-orange)) !important;
                    color: white !important;
                }
            }
        }
    }
}